import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    Clipboard
} from 'react-native';
import { conditionObjWithType } from '../../../../utils/Conditions'
import { ToastToUser } from '../../../../utils/CustomToast';

export default class CarConfigBox extends Component {

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.topBox}>
                    <View style={{position: 'relative'}}>
                        <View style={{height:11, width: '100%', backgroundColor: '#FFEE3B', position: 'absolute', left: 0, top: 9}}></View>
                        <Text style={styles.titleText}>车辆配置</Text>
                    </View>
                </View>
                {
                    this.props.data ?
                        <View style={styles.configBg}>
                            {
                                this.props.data.map((item, index)=>{
                                    if (item) {
                                        return(
                                            <View style={styles.configItemBox} key={index}>
                                                <Text style={styles.configText}>{item}</Text>
                                            </View>
                                        )
                                    }
                                })
                            }
                        </View>
                        :
                        null
                }
                <TouchableOpacity
                    style={styles.lookBox}
                    onPress={() => {
                        this.lookCarConfigDetail()
                    }}
                >
                    <Text style={styles.lookText}>{'查看详细配置>>'}</Text>
                </TouchableOpacity>
            </View>
        )
    }

    lookCarConfigDetail() {
        if (this.props.lookCarConfigDetail) {
            this.props.lookCarConfigDetail()
        }
    }

}

const styles = StyleSheet.create({
    container: {
        marginTop: 10,
        marginHorizontal: 8,
        borderRadius: 6,
        flexDirection: 'column',
        backgroundColor: '#fff',
        padding: 16,
    },
    topBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    titleText: {
        color: '#333',
        fontWeight: 'bold',
        fontSize: 16,
        paddingHorizontal: 1
    },
    configBg: {
        marginTop: 8,
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    configItemBox: {
        flexDirection: 'row',
        paddingHorizontal: 5,
        height: 25,
        backgroundColor: '#FFEBC4',
        alignItems: 'center',
        borderRadius: 2,
        marginRight: 5,
        marginTop: 8,
        // width: '25%',
    },
    configText: {
        fontSize: 12,
        color: '#333333'
    },
    lookBox: {
        marginTop: 15,
        width: '100%',
        height: 24,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 6,
        // backgroundColor: '#F9F9F9'
    },
    lookText: {
        fontSize: 12,
        color: '#F99802',
        fontWeight: '500'
    }
})